<?php
	HtmlsHelper::Message($this->data['message']);
//	$this->IncludeThemeElement('site_header');
	
	echo "
	 <tr class='bg_main'>
	  <td valign='top' class='bg_center_left'><img src='".SITE_IMAGES."vid.gif' alt='' /></td> 
	  <td valign='top' class='bg_center'>
	     <table border='0' cellspacing='0' cellpadding='0' width='100%'><tr>
	       <td valign='top' width='228' style='padding-top: 40px;'>
	       
	       	<!-- STEPS -->   
	       	    
	       	<div style='position: relative; height: 64px;'> 
		       	<div class='tab-left tab-left-select' id = 'step1tab'>
		        	<span class='tab-left-txt1'>".Language::Get('Step')." 1</span><br/>
		           	<span class='tab-left-txt2'>".Language::Get('Personal information')."</span>
		       	</div>
	       	</div>  
	       	<div style='clear: both;'></div>

        	<div class='tab-left' id = 'step2tab'>
           		<span class='tab-left-txt1'>".Language::Get('Step')." 2</span><br/>
           		<span class='tab-left-txt2'>".Language::Get('Private information')."</span>
         	</div>
	         
	        <div class='tab-left' id = 'step3tab'>
	        	<span class='tab-left-txt1'>".Language::Get('Step')." 3</span><br/>
	           	<span class='tab-left-txt2'>".Language::Get('Payment')."</span>
	        </div>    
	                
	        <!-- /STEPS -->  
	          
	       </td>
	       <td valign='top'>
	         <table border='0' cellspacing='0' cellpadding='0' width='100%'>
	          <tr>
	            <td width='5' height='5'><img src='/app/themes/default/img/c1_left_top.png' alt='' /></td>
	            <td class='c1_bg_top'><img src='".SITE_IMAGES."vid.gif' alt='' /></td>
	            <td width='5'><img src='/app/themes/default/img/c1_right_top.png' alt='' /></td>
	          </tr>
	          
	          <tr>
	            <td class='c1_bg_left'><img src='".SITE_IMAGES."vid.gif' alt='' /></td>
	            <td valign='top' height='250' class='c1_txt'>
	              <!-- Info from Tab  -->
	               <div class='bpad15 bborder_d8 size18' id = 'regHeader1'><i>".Language::Get('Enter details')."</i></div>
	               <div class='bpad15 bborder_d8 size18' id = 'regHeader2' style = 'display: none; '><i>".Language::Get('Registration successful')."</i></div>
	               <div class='tpad15'>
	               
	                 <form action = '' method = 'POST' id = 'regForm'>
	                 <table border='0' cellspacing='0' cellpadding='4' width='100%'>
	                 
	                   <tbody id = 'step1fields'>
	                   <tr>
	                      <td><span class='upper size14'>".Language::Get('Account type', 'UPPERCASE').":</span></td>
	                      <td class='dq-input-text'>";
	                      	XHTML::Select('account_type_id', $this->data['account_types'], $this->data[$this->name]['account_type_id'], false, array('style' => 'border: 0px; width: 205px; ', 'id' => 'account_type_id'));
	echo "	              </td>
	                   </tr>
	                   
	                   <tr>
	                      <td width='125'><span class='upper size14'>".Language::Get('Date of Birth', 'UPPERCASE').":</span></td>
	                      <td width='225' class='dq-input-text'>";
	                      	XHTML::InputText('dob', $this->data[$this->name]['dob'], array('id' => 'dobField', 'readonly' => 'readonly'));
	echo "	              </td>
	                      <td rowspan='4'></td>
	                      <td rowspan='4' width='265' valign='top'>
	                      
	                        <!-- COMMENT  -->
	                     	<table border='0' cellspacing='0' cellpadding='0' width='100%'>
					          <tr>
					            <td width='5' height='5'><img src='/app/themes/default/img/c2_left_top.png' alt='' /></td>
					            <td class='c2_bg_top'><img src='".SITE_IMAGES."vid.gif' alt='' /></td>
					            <td width='5'><img src='/app/themes/default/img/c2_right_top.png' alt='' /></td>
					          </tr>
					          <tr>
					            <td class='c2_bg_left'><img src='".SITE_IMAGES."vid.gif' alt='' /></td>
					            <td valign='top' class='c2_txt' style='text-align: left;'>
					            	".Language::Get('Registration info')."
					            </td>
					            <td class='c2_bg_right'><img src='".SITE_IMAGES."vid.gif' alt='' /></td>
					          </tr>
					          <tr>
					            <td width='5' height='5'><img src='/app/themes/default/img/c2_left_bottom.png' alt='' /></td>
					            <td class='c2_bg_bottom'><img src='".SITE_IMAGES."vid.gif' alt='' /></td>
					            <td width='5'><img src='/app/themes/default/img/c2_right_bottom.png' alt='' /></td>
					          </tr>
					         </table>
					         <div class='lpad10'><img src='/app/themes/default/img/c2_s1.png' alt='' /></div>
					         <!-- /COMMENT  -->
					         
	                   	  </td>
	                   </tr>
	                   
	                   <tr>
	                      <td><span class='upper size14'>".Language::Get('Country', 'UPPERCASE').":</span></td>
	                      <td class='dq-input-text'>";
	                      	XHTML::Select('country_id', $this->data['countries'], $this->data[$this->name]['country_id'], false, array('style' => 'border: 0px; '));
	echo "	              </td>
	                   </tr>
	                   
	                   <tr>
	                      <td><span class='upper size14'>".Language::Get('City', 'UPPERCASE').":</span></td>
	                      <td class='dq-input-text'>";
	                      	XHTML::InputText('city', $this->data[$this->name]['city']);
	echo "	              </td>
	                   </tr>
	                   
	                   <tr>
	                      <td><span class='upper size14'>".Language::Get('Email', 'UPPERCASE').":</span></td>
	                      <td class='dq-input-text'>";
	                      	XHTML::InputText('email', $this->data[$this->name]['email']);
	echo "	              </td>
	                   </tr>
	                   </tbody>

	                   <tbody id = 'step2fields' style = 'display: none; '>
	                   <tr>
	                      <td><span class='upper size14'>".Language::Get('First name', 'UPPERCASE').":</span></td>
	                      <td class='dq-input-text'>";
	                      	XHTML::InputText('first_name', $this->data[$this->name]['first_name']);
	echo "	              </td>
	                   </tr>
	                   
	                   <tr>
	                      <td width='125'><span class='upper size14'>".Language::Get('Last name', 'UPPERCASE').":</span></td>
	                      <td width='225' class='dq-input-text'>";
	                      	XHTML::InputText('last_name', $this->data[$this->name]['last_name']);
	echo "	              </td>
	                      <td rowspan='4'></td>
	                      <td rowspan='4' width='265' valign='top'>
	                      
	                        <!-- COMMENT  -->
	                     	<table border='0' cellspacing='0' cellpadding='0' width='100%'>
					          <tr>
					            <td width='5' height='5'><img src='/app/themes/default/img/c2_left_top.png' alt='' /></td>
					            <td class='c2_bg_top'><img src='".SITE_IMAGES."vid.gif' alt='' /></td>
					            <td width='5'><img src='/app/themes/default/img/c2_right_top.png' alt='' /></td>
					          </tr>
					          <tr>
					            <td class='c2_bg_left'><img src='".SITE_IMAGES."vid.gif' alt='' /></td>
					            <td valign='top' class='c2_txt' style='text-align:left !important;'>
					            	".Language::Get('Registration info')."
					            </td>
					            <td class='c2_bg_right'><img src='".SITE_IMAGES."vid.gif' alt='' /></td>
					          </tr>
					          <tr>
					            <td width='5' height='5'><img src='/app/themes/default/img/c2_left_bottom.png' alt='' /></td>
					            <td class='c2_bg_bottom'><img src='".SITE_IMAGES."vid.gif' alt='' /></td>
					            <td width='5'><img src='/app/themes/default/img/c2_right_bottom.png' alt='' /></td>
					          </tr>
					         </table>
					         <div class='lpad10'><img src='/app/themes/default/img/c2_s1.png' alt='' /></div>
					         <!-- /COMMENT  -->
					         
	                   	  </td>
	                   </tr>	                   
	                   
            		   <tr>
	                      <td><span class='upper size14'>".Language::Get('Password', 'UPPERCASE').":</span></td>
	                      <td class='dq-input-text'>";
	                      	XHTML::InputPassword('password', '');
	echo "	              </td>
	                   </tr>	                   

            		   <tr>
	                      <td><span class='upper size14'>".Language::Get('Reenter password', 'UPPERCASE').":</span></td>
	                      <td class='dq-input-text'>";
	                      	XHTML::InputPassword('repassword', '');
	echo "	              </td>
	                   </tr>	                   
	                   
	                   <tr>
	                      <td><span class='upper size14'>".Language::Get('Ref number', 'UPPERCASE').":</span></td>
	                      <td class='dq-input-text'>";
	                      	XHTML::InputText('ref_number', $this->data[$this->name]['ref_number'], array('maxlength' => 13));
	echo "	              </td>
	                   </tr>	                   
	                   </tbody>

	                   <tbody id = 'step3fields' style = 'display: none; '>
            		   <tr>
	                      <td colspan = '2' id = 'payment_container' style = ''>";
//	                      	<p style = 'font-weight: bold; font-size: 14px; '>".Language::Get('Select payment system')."</p>";
							$this->IncludeHTMLPage('paymentdesc');
//							XHTML::Anchor('/info/paypal/', "<img src = '".SITE_IMAGES."paypal.jpg' alt = 'PayPal' style = 'width: 200px; margin-right: 50px;' />", array('target' => '_blank', 'style' => ''));
//							XHTML::Anchor('/info/card/', "<img src = '".SITE_IMAGES."card.jpg' alt = 'PayPal' style = 'width: 200px; margin-left: 50px;' />", array('target' => '_blank', 'style' => ''));
							
	//payment links
	//".Language::Get('Pay and start')."
//	echo "					<div id = 'type_10'>
//								<a id='c2s_bn_lnk_20433' href='https://www.click2sell.eu/buy?alexpascari101' ><img src='http://www.click2sell.eu/images/paynow_v2_5.png' border='0' title='Buy now!' alt='Buy now!' /></a>
//								<script type='text/javascript' src='http://www.click2sell.eu/js/buy_now_butt_v2.js'></script>
//								<script type='text/javascript'>c2s_bn_initializeBuyNowLink('www.click2sell.eu', '20433');</script>
//							</div>
//							<div id = 'type_50'>
//								<a id='c2s_bn_lnk_20434' href='https://www.click2sell.eu/buy?alexpascari50' ><img src='http://www.click2sell.eu/images/paynow_v2_5.png' border='0' title='Buy now!' alt='Buy now!' /></a>
//								<script type='text/javascript' src='http://www.click2sell.eu/js/buy_now_butt_v2.js'></script>
//								<script type='text/javascript'>c2s_bn_initializeBuyNowLink('www.click2sell.eu', '20434');</script>
//							</div>
//							<div id = 'type_100'>
//								<a id='c2s_bn_lnk_20435' href='https://www.click2sell.eu/buy?alexpascari100' ><img src='http://www.click2sell.eu/images/paynow_v2_5.png' border='0' title='Buy now!' alt='Buy now!' /></a>
//								<script type='text/javascript' src='http://www.click2sell.eu/js/buy_now_butt_v2.js'></script>
//								<script type='text/javascript'>c2s_bn_initializeBuyNowLink('www.click2sell.eu', '20435');</script>
//							</div>
//							<div id = 'type_200'>
//								<a id='c2s_bn_lnk_20436' href='https://www.click2sell.eu/buy?alexpascari200' ><img src='http://www.click2sell.eu/images/paynow_v2_5.png' border='0' title='Buy now!' alt='Buy now!' /></a>
//								<script type='text/javascript' src='http://www.click2sell.eu/js/buy_now_butt_v2.js'></script>
//								<script type='text/javascript'>c2s_bn_initializeBuyNowLink('www.click2sell.eu', '20436');</script>
//							</div>
//							<div id = 'type_500'>
//								<a id='c2s_bn_lnk_20437' href='https://www.click2sell.eu/buy?alexpascari500' ><img src='http://www.click2sell.eu/images/paynow_v2_5.png' border='0' title='Buy now!' alt='Buy now!' /></a>
//								<script type='text/javascript' src='http://www.click2sell.eu/js/buy_now_butt_v2.js'></script>
//								<script type='text/javascript'>c2s_bn_initializeBuyNowLink('www.click2sell.eu', '20437');</script>
//							</div>
//	";
	
	echo "	             </td>
	                   </tr>	                   
	                   </tbody>
	                   
	                 </table>
	                 </form>
	               </div>
	              <!-- end Info from Tab  -->
	            </td>
	            <td class='c1_bg_right'><img src='".SITE_IMAGES."vid.gif' alt='' /></td>
	          </tr>
	          
	          <tr>
	            <td width='5' height='5'><img src='/app/themes/default/img/c1_left_bottom.png' alt='' /></td>
	            <td class='c1_bg_bottom'><img src='".SITE_IMAGES."vid.gif' alt='' /></td>
	            <td width='5'><img src='/app/themes/default/img/c1_right_bottom.png' alt='' /></td>
	          </tr>
	          
	         </table>
	         
	         <div class='tpad15 bpad15' style='position: relative; padding-bottom: 40px; padding-top: 5px; '>
	         	<div id='btnPrevStep' class='cpointer' style='position: absolute; right: 50;'>".Language::Get('Previous Step', 'UPPERCASE')."</div>
	         	<div id='btnNextStep' class='cpointer' style='position: absolute; right: 0;'>".Language::Get('Next Step', 'UPPERCASE')."</div>
	         </div>
	         
	       </td>
	     </tr></table>   
	  </td>
	  <td valign='top' class='bg_center_right'><img src='".SITE_IMAGES."vid.gif' alt='' /></td>
	 </tr> 	
	";
?>

<script type="text/javascript">

	 //UI preparations
	 $('#btnRegister').dqButton({type:2, action:'register.html', clickType:'href'});
	 $('#btnPrevStep').dqButton({type:1, action:"GoToStep1()", clickType:'js'});
	 $('#btnPrevStep').hide();
	 $('#btnNextStep').dqButton({type:1, action:"GoToStep2()", clickType:'js'});
	 $('.dq-input-text').dqInput();
	 $('#dobField').datepicker({maxDate: '-18y', dateFormat: 'yy-mm-dd', changeYear: true, changeMonth: true, yearRange: '-100'});
	 
	 $(document).ready(
			function()
			{
				//AJAX loading
				$.loading.classname = 'loading-text';
				$.loading({onAjax:true});

				//month-year swap in Calendar
//				$.fn.swapWith = function(data) {
//				    return this.each(function() {
//				        var copy_to = $(to).clone(true);
//				        var copy_from = $(this).clone(true);
//				        $(to).replaceWith(copy_from);
//				        $(this).replaceWith(copy_to);
//				    });
//				};
//				$('.ui-datepicker-month').swapWith('.ui-datepicker-year');				
			}
		);
	 
	 //goes to step 1
	 function GoToStep1()
	 {
		$('#step2tab').attr('class', 'tab-left');
		$('#step1tab').attr('class', 'tab-left tab-left-select');
		$('#step3tab').attr('class', 'tab-left');
		$('#btnPrevStep').hide();
		$('#btnNextStep .btnType-1-txt.cpointer').attr('onclick', 'GoToStep2()');
		$('#step1fields').show();
		$('#step2fields').hide();
		$('#step3fields').hide();
	 }

	 //goes to step 2
	 function GoToStep2()
	 {
		$('#payment_container div').hide();
		$('#type_' + parseInt($('#account_type_id option:selected').text())).show();
		 
		//validation
		if ($("[name=dob]").attr('value') == '' || $("[name=city]").attr('value') == '' || $("[name=email]").attr('value') == '')
		{
			alert('Please fill all the fields');
			return false;
		}
		var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
		if(!emailReg.test($("[name=email]").val()))
		{
			alert('Please enter the valid email address');
			return false;
		}

		//checks if email is unique
		$.post("/clients/checkemailunique/", $("#regForm").serialize(), AfterCheckUnique);
	 }

	 //goes to step 3
	 function GoToStep3()
	 {
		//validation
		if ($("[name=first_name]").val() == '' || $("[name=last_name]").val() == '' || $("[name=password]").val() == '')
		{
			alert('Please fill all the fields');
			return false;
		}
		if ($("[name=ref_number]").val().length != 13 && $("[name=ref_number]").val() != '')
		{
			alert('Reference number should have 13 characters');
			return false;
		}
		if ($("[name=password]").val() != $("[name=repassword]").val())
		{
			alert('Passwords do not match');
			return false;
		}

		//add user to session
		$.post("/clients/preregister/", $("#regForm").serialize(), AfterPreregister);
		
	 }

	//after email unique check
	function AfterCheckUnique(data)
	{
		if (data != 1)
		{
			alert(data);
			GoToStep1();
		}
		else
		{
			//UI changes 
			$('#regHeader1').show();
			$('#regHeader2').hide();
			$('#step1tab').attr('class', 'tab-left');
			$('#step2tab').wrap("<div style='position: relative; height: 64px;' />");
			$('#step2tab').attr('class', 'tab-left tab-left-select');
			$('#step3tab').attr('class', 'tab-left');
			$('#btnPrevStep').show();
			$('#btnPrevStep .btnType-1-txt.cpointer').attr('onclick', 'GoToStep1()');
			$('#btnNextStep').show();
			$('#btnNextStep .btnType-1-txt.cpointer').attr('onclick', 'GoToStep3()');
			$('#step2fields').show();
			$('#step1fields').hide();
			$('#step3fields').hide();		
		}
	}
	 
	//registers the new client into the session before payment
	function AfterPreregister(data)
	{
		if (data != 1)
		{
			alert(data);
			GoToStep2();
		}
		else
		{
			//UI changes
			$('#regHeader1').hide();
			$('#regHeader2').show();
			$('#step1tab').attr('class', 'tab-left');
			$('#step3tab').wrap("<div style='position: relative; height: 64px;' />");
			$('#step3tab').attr('class', 'tab-left tab-left-select');
			$('#step2tab').attr('class', 'tab-left');
//			$('#btnPrevStep .btnType-1-txt.cpointer').attr('onclick', 'GoToStep2()');
			$('#btnPrevStep').hide();
			$('#btnNextStep').hide();
			$('#step3fields').show();
			$('#step2fields').hide();
			$('#step1fields').hide();
		}
	}
	 
</script>